<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%--常量--%>
    <%@ include file="/common/constHead.jsp"%>
    <%--jQuery--%>
    <%@ include file="/common/jqueryHead.jsp"%>
    <%--jo--%>
    <%@ include file="/common/joHead.jsp"%>
    <%--bootstrap和字体--%>
    <%@ include file="/common/bootstrapHead.jsp"%>
    <%--layer--%>
    <%@ include file="/common/layerHead.jsp"%>
    <%--日期选择--%>
    <%@ include file="/common/dateHead.jsp"%>
    <%--zTree树--%>
    <%@ include file="/common/zTreeHead.jsp"%>
    <%--上传插件--%>
    <%@ include file="/common/uploadHead.jsp"%>
    <%--公共--%>
    <%@ include file="/common/commonHead.jsp"%>

    <link rel="stylesheet" href="<%=URL_STATIC%>static/css/map/font-awesome.css">

    <link rel="stylesheet" href="<%=URL_STATIC%>static/css/map/over-write.css">
    <link rel="stylesheet" href="<%=URL_STATIC%>static/css/map/ol.css">
    <link rel="stylesheet" href="<%=URL_STATIC%>static/css/map/flexiblePanel.css">
    <link rel="stylesheet" href="<%=URL_STATIC%>static/css/map/mapToolbar.css">

    <title>home</title>
    <script type="text/javascript">
        $(function () {

        });
        //搜索提示
        function searchPrompt(){
            $('#searchTips').show();
        }
        //关闭搜索提示
        function closePrompt(){
            $('#searchTips').hide();
        }
        //输入提示
        var lastKey = "";//上一次检索的关键字
        var searchFlag = false;//检索开关,避免重复执行
        var checkObj = null;//当前选中对象
        var objMap = {};//对象映射
        function dreamSearch(search){
            var key = document.getElementById("searchKey").value;
            if(key && (key != lastKey || search)){//key有效且不等于上次检索的值,则进行后续操作,或者是强制检索(点击搜索按钮)
                lastKey = key;//记录搜索值
                searchPrompt();//打开提示框
                //向后台发起请求,检索符合条件的结果
                jo.postAjax("travel/reserve/getPage.action", {name : key}, function(json){
                    if(json && json.code == 0){
                        $("#searchTips").html("");//清空
                        checkObj = null;
                        objMap = {};
                        //展示检索结果
                        if(json.data && json.data.length > 0){
                            for(var i=0;i<json.data.length;i++){
                                var item = json.data[i];
                                objMap[item.id] = item;
                                $("#searchTips").append('<div class="tips-item" onclick="itemClick(\''+item.id+'\')">'+item.name+'</div>');
                            }
                        }else{
                            $("#searchTips").html('<div class="tips-item"">暂无匹配结果~</div>');
                        }
                    }
                }, true);
            }else if(!key){//key值为空,则隐藏提示框
                closePrompt();
            }
        }
        //关联项点击
        function itemClick(id){
            if(id && objMap[id]){
                checkObj = objMap[id];
                document.getElementById("searchKey").value = checkObj.name;
                closePrompt();
            }
        }
        //定位
        function toPoint(checkObj){
            searchPosition(checkObj);

        }
        //格式化经纬度,度分秒转数字
        function formatXY(xy){
            if(typeof(xy) == "number"){
                return xy;
            }else if(typeof(xy) == "string"){
                if(xy.indexOf("°") > -1 || xy.indexOf("′") > -1 || xy.indexOf("″") > -1){//存在度分秒,则进行转换
                    var d = '';//度
                    var f = '';//分
                    var m = '';//秒
                    if(xy.indexOf("°") > -1){//度必须存在
                        d = xy.substring(0, xy.indexOf("°"));
                        if(xy.indexOf("′") > -1){
                            f = xy.substring(xy.indexOf("°") + 1, xy.indexOf("′"));//°和′之间的就是分
                            if(xy.indexOf("″") > -1){
                                m = xy.substring(xy.indexOf("′") + 1, xy.indexOf("″"));
                            }
                        }else if(xy.indexOf("″") > -1){
                            console.error("[坐标格式化] 度分秒格式的坐标存在秒缺少分,坐标 : " + xy);
                        }
                    }else{
                        console.error("[坐标格式化] 度分秒格式的坐标缺少度,坐标 : " + xy);
                    }
                    if(d){
                        var res = parseInt(d);
                        if(f){
                            res += parseFloat(f)/60;
                            if(m){
                                res += parseFloat(m)/60/60;
                            }
                        }
                        return res;
                    }
                }else{//不存在度分秒,则转为int
                    return parseFloat(xy);
                }
            }else{
                console.error("[坐标格式化] 未知的坐标类型, 坐标: " + xy);
            }
            return xy;
        }
    </script>
    <style>
        .map-search-bar{
            width: 425px;
            height: auto;
            position: absolute;
            top: 70px;
            left: 20px;
            z-index: 800;
            opacity: 0.8;
        }
        .map-search-tips{
            width: 370px;
            height: auto;
            display: none;
            background-color: white;
            max-height: 150px;
            overflow-y: auto;
        }
        .tips-item{
            padding: 12px 12px 5px 12px;
            cursor: pointer;
            line-height: 1.7;
        }
        .tips-item:hover{
            background-color: #E3E9EB;
        }
        .map-search-way{
            width:370px;
            height: auto;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 801;
            display: none;
            background-color: white;
        }
        .map-search-way-content{
            width: 100%;
            padding: 5px 35px;
        }
        .border-none{
            border:none;
        }
        .map-way-inp{
            width: 100%;
            height: 35px;
            line-height: 35px;
        }
        .way-cur{
            border: #DDDDDD solid 1px;
            border-bottom: white solid 1px;
            padding: 0px;
            margin: 0px;
            font-weight: bold;
        }

        .olButton,#panelgis_header{
            display: none;
        }
    </style>
</head>
<body class="">

<%--检索区域1--%>
<div class="map-search-bar">
    <div class="input-group" style="box-shadow: grey;">
        <%--搜索框,当光标移入时触发搜索提示--%>
        <input id="searchKey" type="text" class="form-control border-none input-md" placeholder="输入保护地名称" oninput="dreamSearch()">
        <span class="input-group-btn">
            <button class="btn btn-default border-none btn-md" style="border-left: #EEEEEE solid 1px;" type="button" onclick="dreamSearch(true)" onmouseover="window.tidx1 = jo.tips('搜索',this,{tips:3});" onmouseout="jo.close(tidx1);">
                <i class="fa fa-search" aria-hidden="true"></i>
            </button>
            <button class="btn btn-default border-none btn-md" type="button" onclick="toPoint(checkObj)" onmouseover="window.tidx2 = jo.tips('定位',this,{tips:3});" onmouseout="jo.close(tidx2);" style="background-color: #3385FF;color: white;">
                &nbsp;<i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;
            </button>
        </span>
    </div>
    <%--搜索提示,光标移入输入框时触发--%>
    <div class="map-search-tips padding-12" id="searchTips">
        <%--<div class="tips-item">环境科学研究院</div>
        <div class="tips-item">天宫院</div>--%>
    </div>
    <%--/搜索提示--%>
</div>
<%--/检索区域--%>


<%--<div style="width: 100%;position: absolute;top: 15px;z-index: 1000;text-align: center;">
    <div class="btn-group">
        <button type="button" class="btn btn-default" style="border-top-left-radius: 50%;border-bottom-left-radius: 50%;">按</button>
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default" style="border-top-right-radius: 50%;border-bottom-right-radius: 50%;">按</button>
    </div>
</div>--%>


<!--地图控件-->
<div id="map" class="map"></div>
<!--地图tip popup-->
<div id="popup123" style="width: auto;min-width:200px;max-width:1000px;white-space: nowrap;word-wrap: normal;"></div>
<div id="popup" class="ol-popup">
    <a  id="popup-closer" class="ol-popup-closer" style="cursor: pointer"></a>
    <div id="popup-content"></div>
</div>
<!--地图工具条-->
<div class="map-control"></div>
<!--地图图层列表-->
<div id="list-container" class="list-container" style="margin-top: 50px;opacity: 0.8;"></div>


<script src="<%=URL_STATIC%>static/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/html2canvas.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/common.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/ol-debug.js"></script>

<script src="<%=URL_STATIC%>static/js/map/lib/mapStyle.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/mapTool.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/mapEvent.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/featureEdit.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/mapFactory.js"></script>
<script src="<%=URL_STATIC%>static/js/map/lib/mapUtil.js"></script>
<script src="<%=URL_STATIC%>static/js/map/indexMap.js"></script>
</body>
</html>
